const {src,dest,series,parallel}  = require('gulp')
const path = require('path')
const gulpWebserver = require('gulp-webserver')
const webpackStream = require('webpack-stream')
const gulpSass = require('gulp-sass')
const proxy = require('http-proxy-middleware')
const watch = require('gulp-watch')
const del = require('del')

//拷贝 index.html 到dev目录下
function copyHtml(){
    return src('./*.html')
        .pipe(dest('./dev/'))
}
//拷贝 libs 到dev目录下
function copyLibs(){
    return src('./src/libs/**/*')
        .pipe(dest('./dev/libs'))
}
//拷贝 libs 到dev目录下
function copyImages(){
    return src('./src/images/**/*')
        .pipe(dest('./dev/images'))
}
//拷贝 libs 到dev目录下
function copyIcons(){
    return src('./src/icons/**/*')
        .pipe(dest('./dev/icons'))
}
//启动一个server
function webserver(){
    return src('./dev/')
    .pipe(gulpWebserver({
        host:'localhost',
        port:8080 ,
        livereload:true,
        middleware:[
            proxy('/api',{
                target:'http://s.mobile.jumei.com/',
                changeOrigin:true,//访问不同域名需要配置为true
                pathRewrite:{
                    '^/api':''
                }
            }),
            proxy('/group',{
                target:'https://h5.jumei.com',
                changeOrigin:true,//访问不同域名需要配置为true
                pathRewrite:{
                    '^/group':''
                }
            }),
            proxy('/json',{
                target:'http://localhost:9000',
                pathRewrite: {
                    '^/json': ''
                }
            })
        ]
    }))  
}

//编译JS模块
function packJs(){
    return src('./src/**/*')
        .pipe(webpackStream({
            mode:'development',
            entry:{
                app:'./src/app.js'
            },
            output:{
                filename:'[name].js', //[name] = app
                path:path.resolve(__dirname,'./dev') //__dirname是当前打开文件所在的物理路径
            },
            //将ES6-ES8 代码转换成 ES5
            module:{
                rules:[
                    {
                        test:/\.js$/,
                        exclude:/node_modules/,
                        use:{
                            loader:'babel-loader',
                            options:{
                                presets:['@babel/preset-env'],
                                plugins: ['@babel/plugin-transform-runtime']
                            }
                        }   
                    },
                    {
                        test:/\.html$/,
                        loader:'string-loader'
                    }
                ]
            }
        }))
        .pipe(dest('./dev/scripts'))
}

//编译Css模块
function packCss(){
    return src('./src/styles/app.scss')
        .pipe(gulpSass().on('error',gulpSass.logError))
        .pipe(dest('./dev/styles'))
}

//删除文件时同步
function clear(target){
    return function(){
       return del(target)
    }
}

//监听变化
function watcher(){
    watch('./src/libs/**/*',series(copyLibs))
    watch('./src/images/**/*',series(clear('./dev/images'),copyImages))
    watch('./src/icons/**/*',series(clear('./dev/icons'),copyIcons))
    watch('./*.html',series(copyHtml))
    watch('./src/styles/**/*',series(packCss))
    watch(['./src/**/*','!src/libs/**/*','!src/icons/**/*','!src/images/**/*','!src/styles/**/*'],series(packJs))
}

exports.default = series(parallel(packJs,packCss,copyLibs,copyImages,copyIcons),copyHtml,webserver,watcher)